<template>
  <q-card style="width: 650px">
    <!-- 标题 -->
    <q-toolbar> <q-toolbar-title>日志详情</q-toolbar-title> <q-btn v-close-popup icon="close" round flat /> </q-toolbar>
    <q-separator />

    <!-- 内容 -->
    <q-card-section class="q-col-gutter-md" style="font-size: 18px">
      <table class="log-table">
        <tr>
          <td class="label">操作类别：</td>
          <td class="content">【{{ log.operateType }}】{{ log.logTitle }}</td>
        </tr>

        <tr>
          <td class="label">操作用户：</td>
          <td class="content">【{{ log.createdBy }}】【{{ log.createdTime }}】</td>
        </tr>

        <tr>
          <td class="label">请求路径：</td>
          <td class="content">【{{ log.requestMethod }}】【{{ log.requestPath }}】</td>
        </tr>

        <tr>
          <td class="label">请求终端：</td>
          <td class="content">【{{ log.clientIp }}】【{{ log.clientBrowser }}】</td>
        </tr>

        <tr>
          <td class="label">操作结果：</td>
          <td class="content">
            <span class="q-mr-sm" :class="log.success ? 'text-green' : 'text-red'">【{{ log.success ? '成功' : '失败' }}】</span>
            【耗时<span class="text-blue"> {{ log.executeTime }}</span> 毫秒】
          </td>
        </tr>

        <tr>
          <td class="label">请求参数：</td>
          <td class="content">
            <q-input readonly :model-value="formatText(log.requestParam)" type="textarea" @click="copy(log.requestParam)">
              <q-tooltip v-if="log.logContent != null && log.requestParam.trim().length > 0" anchor="center middle"> 点击复制 </q-tooltip>
            </q-input>
          </td>
        </tr>

        <tr>
          <td class="label">日志内容：</td>
          <td class="content">
            <q-input readonly :model-value="formatText(log.logContent)" type="textarea" @click="copy(log.logContent)">
              <q-tooltip v-if="log.logContent != null && log.logContent.trim().length > 0" anchor="center middle"> 点击复制 </q-tooltip>
            </q-input>
          </td>
        </tr>
      </table>
    </q-card-section>
    <q-separator />

    <!-- 操作 -->
    <q-card-actions>
      <q-space />
      <q-btn v-close-popup>关闭</q-btn>
    </q-card-actions>
  </q-card>
</template>

<script lang="ts" setup>
  import { copyToClipboard } from 'quasar';

  import { LogDto } from 'src/api/monitor/log';
  import { Message } from 'src/utils';

  // 属性和事件定义
  defineProps<{ log: LogDto }>();

  function copy(text: string) {
    if (text === undefined || text === null || text === '' || text.trim() === '') {
      return;
    }
    const ft = formatText(text);
    copyToClipboard(ft)
      .then(() => Message.success('已成功复制到剪贴板'))
      .catch(() => Message.error('操作失败，可能是浏览器不支持'));
  }

  function formatText(text: string) {
    try {
      const json = JSON.parse(text);
      return JSON.stringify(json, null, 2);
    } catch (e) {
      return text;
    }
  }
</script>

<style lang="scss" scoped>
  .log-table {
    width: 100%;
    tr {
      height: 40px;
    }
    .label {
      width: 100px;
    }
  }
</style>
src/api/monitor/log
